<template>
  <div class="index-wrap">
    <el-menu
      :default-active="$store.state.routerIndex"
      :collapse="true"
      active-text-color="#07c160"
      router
      background-color="#2e2e2e"
    >
      <el-menu-item index="/index/chat" @click="clickRouteIndex('/index/chat')">
        <i class="el-icon-chat-round"></i>
        <span slot="title">聊天</span>
      </el-menu-item>
      <el-menu-item
        index="/index/mailList"
        @click="clickRouteIndex('/index/mailList')"
      >
        <i class="el-icon-user"></i>
        <span slot="title">通讯录</span>
      </el-menu-item>
      <el-menu-item
        index="/index/folder"
        @click="clickRouteIndex('/index/folder')"
      >
        <i class="el-icon-folder-opened"></i>
        <span slot="title">文件</span>
      </el-menu-item>
      <el-menu-item
        index="/index/setting"
        @click="clickRouteIndex('/index/setting')"
      >
        <i class="el-icon-setting"></i>
        <span slot="title">设置</span>
      </el-menu-item>
    </el-menu>
    <!-- 主区域 -->
    <router-view class="container"></router-view>
  </div>
</template>

<script>
import { getAllGroups_fn } from "../api/Index/group";
import { getAllTempGroups_fn } from "../api/Index/user";
import socket_m from "../util/connect";
export default {
  data() {
    return {
      defaultIndex: "",
    };
  },
  async mounted() {
    this.$store.commit("updateRouterIndex_fn", this.$route.fullPath);
    if (localStorage.getItem("token")) {
      if (!this.$store.state.isConnect) {
        await socket_m.connectServer();
        let token = localStorage.getItem("token");
        socket_m.sendMsg(
          "userConnect",
          { token },
          (o) => {
            console.log(o);
          },
          false
        );
      }
      // 刷新网页获取最新数据
      getAllGroups_fn();
      getAllTempGroups_fn();
    }
  },
  methods: {
    clickRouteIndex(path) {
      this.$store.commit("updateRouterIndex_fn", path);
    },
  },
};
</script>
<style lang="less" scoped>
.index-wrap {
  margin: 0 auto;
  width: 864px;
  height: 600px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  .el-menu {
    width: 64px;
    height: 100%;
    background-color: #2e2e2e;
    float: left;
    border-right: none;
  }
  .container {
    width: 800px;
    height: 600px;
    float: left;
  }
}
</style>